<script setup>
// 博客小模块
import { computed } from "vue";
import { classToAll, writeClipboard } from "@/hook/universality";
import ViewerImgs from "./ViewerImgs.vue";
import { Delete, More, Share, Star, CaretTop } from "@element-plus/icons-vue"
import { useRouter } from "vue-router"
import dayjs from 'dayjs'
const w = window
const props = defineProps(['blog'])

const router = useRouter();
const blogImgs = computed(() => {
  props.blog.blogData ? 1 : (props.blog.blogData = []); // 解决blog没有Data的问题
  return eval(props.blog.blogData).filter((img) => {
    return img.substring(0, 4) == "http";
  })
})

const deleteBlog = (blogid) => {
  ElMessage("删除功能正在开发中...");
};
const starBlog = (blogid) => {
  ElMessage("收藏功能正在开发中...");
};
const likeBlog = (blogid) => {
  ElMessage("点赞功能正在开发中...");
}

const shareBlog = (blogid) => {
  writeClipboard("https://mylog.cool/#/blog?id=" + blogid + "来自mylog.cool的分享", () => {
    myMsgS('分享链接已经放入剪贴板')
  })
};

</script>

<template>
  <!-- 主模块模板 -->
  <div class="model">
    <div class="in-model">
      <div class="text">
        <div class="tittle" v-if="blog.blogTittle">
          <span class="blog-title" @click="w.open('/#/blog?id=' + blog.blogId, '_blank')">{{ blog.blogTittle }}</span>
          <span class="blog-id">{{ blog.blogId }}</span>
        </div>
        <div class="content" v-if="blog.blogTittle !== blog.blogContent"> {{ blog.blogContent }} </div>
        <ViewerImgs v-if="blogImgs.length" :blogImgs="blogImgs" />
      </div>
      <div class="info">
        <span class="author" @click="w.open('/#/user?name=' + blog.blogUsername, '_blank')">{{ blog.blogUsername
        }}</span>&nbsp;·
        <span class="date">{{ dayjs(blog.blogTime).format("YY-M-D H:mm") }}</span>&nbsp;·
        <span class="class">{{ classToAll(blog.blogLabel) }}</span>
      </div>
    </div>

    <!-- 悬浮菜单 -->
    <div class="menu">
      <el-button-group size="small">
        <el-button :icon="More" @click="router.push('/blog?id=' + blog.blogId)" />
        <el-button :icon="Share" @click="shareBlog(blog.blogId)" />
        <el-button :icon="Delete" @click="deleteBlog(blog.blogId)" />
        <el-button :icon="Star" @click="starBlog(blog.blogId)" />
        <el-button :icon="CaretTop" @click="likeBlog(blog.blogId)" />
      </el-button-group>
    </div>
  </div>
</template>

<style scoped lang="less">
.in-model {

  /* 文本框************************* */
  .text {
    .tittle {
      font-weight: 600;
      font-size: 25px;

      /* 超出省略号（单行） */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;

      .blog-title {
        cursor: pointer;
      }

      .blog-id {
        font-size: 10px;
        font-weight: normal;
        color: var(--mini-text-color)
      }
    }

    .content {
      margin-top: 5px;
      /* 超出省略号（多行） */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      overflow: hidden;
    }
  }

  /* 最下方信息*********************** */
  .info {
    margin-top: 10px;
    font-size: 15px;

    * {
      display: inline-block;
      color: var(--mini-text-color);
      vertical-align: top;
    }

    .author {
      max-width: 40%;
      cursor: pointer;
      /* 超出省略号（单行） */
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

}

.menu {
  display: none;
  position: absolute;
  right: 15px;
  bottom: 15px;
}

.model:hover .menu {
  display: inline-block;
}


*:hover::-webkit-scrollbar {
  height: 20px;
}
</style>